<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Login</title>
         <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Pragma" content="no-cache" />
        <script type="text/javascript">
        {
            if(history.forward(1))
            location.replace(history.forward(1));
        }
        </script>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'></meta>
        <!-- Font awesome -->
        <link href="#{request.contextPath}/resources/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
        <!-- bootstrap 3.0.2 -->
        <link href="#{request.contextPath}/resources/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
        <!-- Ionicons -->
        <link href="#{request.contextPath}/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="#{request.contextPath}/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <h:outputScript library="primefaces" name="jquery/jquery.js"/> 
    </h:head>

    <h:body class="bg-black">


        <div class="form-box" id="login-box">

            <div id="LoginForm">
                <div class="header"><i class="fa fa-sign-in"/> LogIn</div>
                <div class="body bg-gray">
                    <h:form id="usuariosLogin">


                        <p:messages id="growl" closable="true" showSummary="true">
                            <p:effect type="pulsate" event="load" delay="500" />
                        </p:messages>


                        <div class="form-group">
                          
                            <p:inputText id="usuario"

                                         styleClass="form-control"
                                         value="#{usuarioController.usuario}" 
                                         required="true" maxlength="8" 
                                         placeholder="Usuario"
                                         requiredMessage="Ingrese usuario!"/> 
                        </div>

                        <div class="form-group">

                            <p:password id="password" 
                                        styleClass="form-control"

                                        placeholder="Password"
                                        value="#{usuarioController.pass}" 
                                        required="true" maxlength="8" 
                                        requiredMessage="Ingrese password!"
                                        /> 


                        </div>


                        <div class="footer">   

                            <p:commandLink value="Entrar" 
                                           action="#{usuarioController.login()}" 
                                           update="usuariosLogin"
                                           styleClass="btn bg-olive btn-block"
                                           oncomplete="handleSubmit(args,LoginForm);"/>


                            <p>  <h:commandLink>

                                    Necesito ayuda <i class="fa fa-info-circle"/>
                                    <f:ajax listener="#{usuarioController.onBeforeShowDialog}" render="dialog" />
                                </h:commandLink></p>
                        </div>

                        <p:dialog id="dialog"
                                  widgetVar="dlg"
                                  header="Contáctanos..." 
                                  modal="true"
                                  appendTo="@(body)"
                                  resizable="false" 
                                  visible="#{usuarioController.visible}"
                                  closable="true"
                                  style="width: 50%;min-width: 260px;min-height: 300px;"
                                  showEffect="clip" hideEffect="drop">

                            <f:ajax onevent="close" listener="#{usuarioController.onBeforeHideDialog}" render="dialog" />

                            <p:graphicImage library="img" name="myqrphone.png" style="" />
                            <i class="fa fa-hand-o-left fa-3x" style="margin-top: 10%;"/>
                            <h3>Escanea el código QR con tu smarthphone <span class="glyphicon glyphicon-phone"/></h3>
                            <f:facet name="footer">



                            </f:facet>


                        </p:dialog>  

                    </h:form>
                </div> 

                <div class="margin text-center">
                    <span>Bienvenido a IBIS &copy;</span>
                    <br/>
                    <div class="animacion">

                        <svg   x="0px" y="0px" viewBox="0 0 30 30" enable-background="new 0 0 30 30"  width="30" height="30">

                            <rect fill="#FBBA44" width="15" height="15">
                                <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;15,0;15,15;0,15;0,0;" repeatCount="8"/>
                            </rect>	

                            <rect x="15" fill="#E84150" width="15" height="15">
                                <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,15;-15,15;-15,0;0,0;" repeatCount="8"/>
                            </rect>	

                            <rect x="15" y="15" fill="#62B87B" width="15" height="15">
                                <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;-15,0;-15,-15;0,-15;0,0;" repeatCount="8"/>
                            </rect>	

                            <rect y="15" fill="#2F6FB6" width="15" height="15">
                                <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.7s" values="0,0;0,-15;15,-15;15,0;0,0;" repeatCount="8"/>
                            </rect>
                        </svg>


                    </div>

                </div>


            </div>


        </div>

        <script src="#{request.contextPath}/resources/js/bootstrap.min.js"></script>
        <script src="#{request.contextPath}/resources/js/AdminLTE/app.js"></script>
        <script src="#{request.contextPath}/resources/js/jsfcrud.js"></script>

    </h:body>
</html>

